<template>
  <view class="register-page">
    <!-- 顶部logo -->
    <view class="logo-container">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="slogan">欢迎注册商城会员</text>
    </view>

    <!-- 注册表单 -->
    <AuthForm 
      :form-items="formItems" 
      :submit-text="'立即注册'" 
      @submit="handleRegister"
      @navigate="handleNavigate"
    >
      <template #extra>
        <view class="form-extra">
          <checkbox-group @change="handleAgreeChange">
            <label class="agree-label">
              <checkbox value="agree" :checked="agree" color="#FF80C0" />
              <text>我已阅读并同意</text>
              <text class="protocol" @click.stop="navigateToProtocol">《用户协议》</text>
              <text>和</text>
              <text class="protocol" @click.stop="navigateToPrivacy">《隐私政策》</text>
            </label>
          </checkbox-group>
        </view>
      </template>
    </AuthForm>

    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <view class="line"></view>
        <text class="text">其他注册方式</text>
        <view class="line"></view>
      </view>
      <view class="login-methods">
        <button class="method-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
          <uni-icons type="weixin" size="50" color="#09BB07"></uni-icons>
          <text>微信</text>
        </button>
        <button class="method-btn" @click="handleSmsLogin">
          <uni-icons type="chat" size="50" color="#FF80C0"></uni-icons>
          <text>短信</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import AuthForm from './components/AuthForm.vue';

const agree = ref(false);
const formItems = ref([
  {
    type: 'text',
    name: 'mobile',
    label: '手机号',
	value:'',
    placeholder: '请输入手机号码',
    rules: [
      { required: true, message: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
    ]
  },
  {
    type: 'password',
    name: 'password',
    label: '密码',
	value:'',
    placeholder: '请输入6-20位密码',
    rules: [
      { required: true, message: '请输入密码' },
      { min: 6, max: 20, message: '密码长度6-20位' }
    ]
  },
  {
    type: 'password',
    name: 'confirmPassword',
    label: '确认密码',
	value:'',
    placeholder: '请再次输入密码',
    rules: [
      { required: true, message: '请确认密码' },
      { validator: validatePassword }
    ]
  },
  {
    type: 'text',
    name: 'code',
    label: '验证码',
	value:'',
    placeholder: '请输入验证码',
    extra: {
      type: 'code',
      text: '获取验证码',
      onClick: getSmsCode
    },
    rules: [
      { required: true, message: '请输入验证码' },
      { len: 6, message: '验证码为6位数字' }
    ]
  }
]);

// 密码验证
/* function validatePassword(rule, value, callback) {
  if (value !== formItems.value[1].value) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
} */

function validatePassword(rule, value, callback, formData) {
  if (value !== formData.password) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
}

// 获取短信验证码
function getSmsCode() {
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  });
}

// 协议勾选
function handleAgreeChange(e) {
  agree.value = e.detail.value.includes('agree');
}

// 提交注册
function handleRegister(formData) {
  if (!agree.value) {
    uni.showToast({
      title: '请先同意用户协议',
      icon: 'none'
    });
    return;
  }

  uni.showLoading({ title: '注册中...' });
  
  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '注册成功',
      icon: 'success'
    });
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    }, 1500);
  }, 2000);
}

// 导航到登录
function handleNavigate() {
  uni.navigateTo({
    url: '/pages/login/login'
  });
}

// 查看协议
function navigateToProtocol() {
  uni.navigateTo({
    url: '/pages/protocol/user'
  });
}

// 查看隐私政策
function navigateToPrivacy() {
  uni.navigateTo({
    url: '/pages/protocol/privacy'
  });
}

// 微信手机号注册
function onGetPhoneNumber(e) {
  console.log('微信手机号:', e.detail);
}

// 短信快捷注册
function handleSmsLogin() {
  uni.navigateTo({
    url: '/pages/auth/sms-register'
  });
}
</script>

<style lang="scss" scoped>
.register-page {
  padding: 60rpx 50rpx;
  min-height: 100vh;
  background-color: $white-bg;
  
  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;
    
    .logo {
      width: 150rpx;
      height: 150rpx;
      margin-bottom: 20rpx;
    }
    
    .slogan {
      font-size: $font-size-32rpx;
      color: $text-color;
    }
  }
  
  .form-extra {
    margin: 20rpx 0 40rpx;
    
    .agree-label {
      display: flex;
      align-items: center;
      font-size: $font-size-24rpx;
      color: $text-color-666;
      
      .protocol {
        color: $primary-color;
        margin: 0 5rpx;
      }
    }
  }
  
  .other-login {
    margin-top: 80rpx;
    
    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      
      .line {
        flex: 1;
        height: 1rpx;
        background-color: #eee;
      }
      
      .text {
        padding: 0 20rpx;
        font-size: $font-size-26rpx;
        color: $text-color-666;
      }
    }
    
    .login-methods {
      display: flex;
      justify-content: center;
      gap: 80rpx;
      
      .method-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: none;
        border: none;
        padding: 0;
        
        &::after {
          border: none;
        }
        
        text {
          font-size: $font-size-24rpx;
          color: $text-color-666;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>